// 显示当前登录者头像及工号
showHeadImgId()

// 头部退出按钮
$('#quit').find('button').click(function(){
     open('./login.html','_self')
})

//点击搜索按钮
$('button').on('click', function () {
     //清除表单中按钮的默认提交事件
     event.preventDefault()
})

//点击主菜单
$('#mianNav .navbar-nav>li').on('click', function () {
     //设置自身为选中状态并清除其他选项的选中状态
     $(this).addClass('mianActive').siblings().removeClass('mianActive')
})

//点击二级菜单
$('main .navbar-nav>li').on('click', function () {
     //设置自身为选中状态并清除其他选项的选中状态
     $(this).addClass('active').siblings().removeClass('active')
})

// 1.将数据动态渲染在页面上
let maxPage = 0                    //最大页
let nowPage = 1                    //当前页
let useData = getData('staff')
let JobIdVal                       //点击的该行删除按钮相对应的工号
// 数据分页
function showPage() {
     let pageLen = useData.length
     let countPage = Math.ceil(pageLen / 10)
     maxPage = countPage
     $('#page').html(`
     <li class="pageUp"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
               
     <li  id="lastLi" class="pageDown"><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
     `)
     for (let i = 1; i <= countPage; i++){
          $('#lastLi').before(`
          <li class="everyPage"><a href="#">${i} <span class="sr-only">(current)</span></a></li>
          `)
     }
}
showPage()

// 给每一页添加绑定事件
$('.pagination').on('click', '.everyPage', function () {
     everyPage($(this).text())
})
function everyPage(clickNum) {
     nowPage = parseInt(clickNum)
     let start = (nowPage - 1) * 10
     let end = start + 9
     if (nowPage === maxPage) {
          end = useData.length - 1
     }
     pageData(start, end)
     changeLi(nowPage)
}
changeLi(1)
// 渲染页面数据
function pageData(start, end) {
     $('#tbodyContent').html('')
     for (let i = start; i <= end; i++) {
          let everyLiDate = `
               <tr class="headPic">
                    <td><img src="${useData[i].headPortrait}"></td>
                    <td>${useData[i].jobNumber}</td>
                    <td>${useData[i].password}</td>
                    <td>${useData[i].userName}</td>
                    <td>${useData[i].sex}</td>
                    <td>${useData[i].Birthdate}</td>
                    <td>${useData[i].tel}</td>
                    <td>${useData[i].jobTitle}</td>
                    <td>${useData[i].AccessLevel}</td>
                    <td>
                         <button class = "update" title="修改"><span class ="iconfont icon-xiugai"></span></button>
                         <button class = "del" title="删除"><span class ="iconfont icon-ziyuanxhdpi "></span></button>
                    </td>
               </tr>
          `
          $('#tbodyContent').append(everyLiDate)
     }
}
pageData(0, 9)

//下一页
$('#page').on('click', '.pageDown', function () {
     if (nowPage < maxPage) {
          everyPage(++nowPage)
     }
})
// 上一页
$('#page').on('click', '.pageUp', function () {
     if (nowPage > 1) {
          everyPage(--nowPage)
     }
})
// 按钮变色
function changeLi(a) {
     for (let i = 0; i < $('.everyPage').length; i++) {
          $('.everyPage').eq(i).removeClass('active')
     }
     $('.everyPage').eq(a).addClass('active')
}

//修改员工信息
// 获取表格数据显示在表单
$('#tbodyContent').on('click', '.update', function () {
     $('.modal-content').html(`
     <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
             aria-hidden="true">&times;</span></button>
     <h4 class="modal-title" id="myModalLabel">员工信息修改</h4>
     </div>
     <div class="modal-body">
     <form class="form-horizontal">
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">工号</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control" id="getJobId" placeholder="工号" disabled>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">密码</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control contentNull1" id="getPassword" placeholder="请输入密码">
                 <span class="contentNull">密码不能为空</span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control contentNull1" id="getName" placeholder="请输入姓名">
                 <span class="contentNull">姓名不能为空</span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
             <div class="col-sm-10">
                 <span class="sex1">男</span> <span class="sex2"><input type="radio" class="getSex"
                         name="sex" value="man"></span>
                 <span class="sex1">女</span> <span class="sex2"><input type="radio" class="getSex"
                         name="sex" value="woman"></span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">出生日期</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control contentNull1" id="getBirthdate"
                     placeholder="请输入xxxx/xx/xx格式的日期">
                 <span class="contentNull">出生日期不能为空</span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">职位</label>
             <div class="col-sm-10">
                 <select name="" id="getPosition" class="form-control">
                     <option value="option1">管理员</option>
                     <option value="option1">前台</option>
                     <option value="option2">保洁</option>
                 </select>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">联系电话</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control contentNull1" id="getTel" placeholder="请输入电话号码">
                 <span class="contentNull">联系电话不能为空</span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">权限等级</label>
             <div class="col-sm-10">
                 <input type="number" class="form-control contentNull1" id="getAccessLevel" placeholder="请选择权限等级" max="2" min="0">
                 <span class="contentNull">权限不能为空</span>
             </div>
         </div>
          </form>
     </div>
     <div class="modal-footer">
          <button type="button" class="btn btn-default" id="affirm">确认</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
     </div> 
     `)
     $('#myModal').modal('show')
     let JobIdVal = $(this).parents('tr').children('td').eq(1).text()
     let PasswordVal = $(this).parents('tr').children('td').eq(2).text()
     let NameVal = $(this).parents('tr').children('td').eq(3).text()
     let SexVal = $(this).parents('tr').children('td').eq(4).text()
     let BirthdateVal = $(this).parents('tr').children('td').eq(5).text()
     let TelVal = $(this).parents('tr').children('td').eq(6).text()
     let PositionVal = $(this).parents('tr').children('td').eq(7).text()
     let AccessLevelVal = $(this).parents('tr').children('td').eq(8).text()
     $('#getJobId').val(JobIdVal)
     $('#getPassword').val(PasswordVal)
     $('#getName').val(NameVal)
     if (SexVal == '男') {
          $('.getSex').eq(0).prop('checked', true)
     }
     else {
          $('.getSex').eq(1).prop('checked', true)
     }
     $('#getBirthdate').val(BirthdateVal)
     $('#getTel').val(TelVal)
     if (PositionVal == '管理员') {
          $('#getPosition>option').eq(0).prop('selected', true)
     }
     else if (PositionVal == '前台') {
          $('#getPosition>option').eq(1).prop('selected', true)
     }
     else {
          $('#getPosition>option').eq(2).prop('selected', true)
     }
     $('#getAccessLevel').val(AccessLevelVal)
     // 判断输入框是否为空
     $('.contentNull1').blur(function () {
          if ($(this).val() == '') {
               $(this).siblings().show()
          }
          else {
               $(this).siblings().hide()
          }
     })
})
//获取表单数据添加到数据库
$('.modal-content').on('click', '#affirm', function () {
     let getJobId = parseInt($('#getJobId').val())               //工号
     let getPassword = $('#getPassword').val()                   //密码
     let getName = $('#getName').val()                           //姓名
     let getSex                                                  //性别
     let getBirthdate = $('#getBirthdate').val()                 //出生日期
     let getPosition = $('#getPosition>option:checked').html()   //职位
     let getTel = $('#getTel').val()                             //联系电话
     let AccessLevel = $('#getAccessLevel').val()               //权限      

     if ($('.getSex:checked').val() === 'woman') {
          getSex = '女'
     }
     else {
          getSex = '男'
     }
     if (getPassword !== '' && getName !== '' && getBirthdate !== '' && getTel !== '') {
          for (let i = 0; i < useData.length; i++) {
               if (useData[i].jobNumber == getJobId) {
                    useData[i].password = getPassword
                    useData[i].userName = getName
                    useData[i].sex = getSex
                    useData[i].Birthdate = getBirthdate
                    useData[i].jobTitle = getPosition
                    useData[i].tel = getTel
                    useData[i].AccessLevel = AccessLevel
               }
          }
          saveData('staff', useData);
          everyPage(nowPage)
          $('.modal-content').html(`
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
               aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="myModalLabel">修改提示</h4>
          </div>
          <div class="modal-body">
               修改成功！
          </div>
          <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
          </div> 
          `)
          $('#myModal').modal('show')
     }
     else {
          //提示输入错误
          if (getPassword == '') {
               $('#getPassword').siblings().show()
          }
          if (getName == '') {
               $('#getName').siblings().show()
          }
          if (getBirthdate == '') {
               $('#getBirthdate').siblings().show()
          }
          if (getTel == '') {
               $('#getTel').siblings().show()
          }
     }
})

//删除员工信息
$('#tbodyContent').on('click', '.del', function () {
     JobIdVal = $(this).parents('tr').children('td').eq(1).text()
     $('.modal-content').html(`
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
               aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="myModalLabel">删除提示</h4>
          </div>
          <div class="modal-body">
               确定要删除吗?
          </div>
          <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal" id ="delAffirm">确认</button>
               <button type="button" class="btn btn-default" data-dismiss="modal" id = "delCancel">取消</button>
          </div> 
     `)
     $('#myModal').modal('show')
})
// 确认删除员工信息
$('.modal-content').on('click', '#delAffirm', function () {
     for (let i = 0; i < useData.length; i++) {
          if (JobIdVal == useData[i].jobNumber) {
               useData.splice(i, 1)
          }
     }
     saveData('staff', useData);
     everyPage(nowPage)
     showPage()
     $('.modal-content').html(`
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
               aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="myModalLabel">删除提示</h4>
          </div>
          <div class="modal-body">
               删除成功！
          </div>
          <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
          </div> 
     `)
     $('#myModal').modal('show')
})
//添加员工信息
$('.addStaff').click(function () {
     $('.modal-content').html(`
     <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
             aria-hidden="true">&times;</span></button>
     <h4 class="modal-title" id="myModalLabel">添加员工信息</h4>
     </div>
     <div class="modal-body">
     <form class="form-horizontal">
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">工号</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control" id="getJobId" placeholder="工号" disabled>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">密码</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control contentNull1" id="getPassword" placeholder="请输入密码">
                 <span class="contentNull">密码不能为空</span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control contentNull1" id="getName" placeholder="请输入姓名">
                 <span class="contentNull">姓名不能为空</span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
             <div class="col-sm-10">
                 <span class="sex1">男</span> <span class="sex2"><input type="radio" class="getSex"
                         name="sex" value="man"></span>
                 <span class="sex1">女</span> <span class="sex2"><input type="radio" class="getSex"
                         name="sex" value="woman"></span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">出生日期</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control contentNull1" id="getBirthdate"
                     placeholder="请输入xxxx/xx/xx格式的日期">
                 <span class="contentNull">出生日期不能为空</span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">职位</label>
             <div class="col-sm-10">
                 <select name="" id="getPosition" class="form-control">
                     <option value="option1">管理员</option>
                     <option value="option1">前台</option>
                     <option value="option2">保洁</option>
                 </select>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">联系电话</label>
             <div class="col-sm-10">
                 <input type="text" class="form-control contentNull1" id="getTel" placeholder="请输入电话号码">
                 <span class="contentNull">联系电话不能为空</span>
             </div>
         </div>
         <div class="form-group1">
             <label for="inputEmail3" class="col-sm-2 control-label">权限等级</label>
             <div class="col-sm-10">
                 <input type="number" class="form-control contentNull1" id="getAccessLevel" placeholder="请选择权限等级" max="2" min="0">
                 <span class="contentNull">权限不能为空</span>
             </div>
         </div>
          </form>
     </div>
     <div class="modal-footer">
          <button type="button" class="btn btn-default" id="addAffirm">确认</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
     </div> 
     `)
     $('#getJobId').val((useData[useData.length - 1].jobNumber) * 1 + 1)    //自动生成工号
     $('#myModal').modal('show')
     // 判断输入框是否为空
     $('.contentNull1').blur(function () {
          if ($(this).val() == '') {
               $(this).siblings().show()
          }
          else {
               $(this).siblings().hide()
          }
     })
})
$('.modal-content').on('click', '#addAffirm', function(){
     let id = useData[useData.length - 1].id + 1
     let getJobId = parseInt($('#getJobId').val())               //工号
     let getPassword = $('#getPassword').val()                   //密码
     let getName = $('#getName').val()                           //姓名
     let getSex                                                  //性别
     let getBirthdate = $('#getBirthdate').val()                 //出生日期
     let getTel = $('#getTel').val()                             //联系电话
     let getPosition = $('#getPosition>option:selected').html()   //职位
     let AccessLevel = $('#getAccessLevel').val()               //权限      

     if ($('.getSex:checked').val() === 'woman') {
          getSex = '女'
     }
     else {
          getSex = '男'
     }
     if (getPassword !== '' && getName !== '' && getBirthdate !== '' && getTel !== '' && AccessLevel !== '') {
          useData.push({
               id: id,
               jobNumber: getJobId,
               password: getPassword,
               userName: getName,
               sex: getSex,
               Birthdate: getBirthdate,
               tel: getTel,
               jobTitle: getPosition,
               AccessLevel: AccessLevel,
               headPortrait: '../images/员工1.webp'
          })
          saveData('staff', useData);
          everyPage(nowPage)
          $('.modal-content').html(`
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加提示</h4>
               </div>
               <div class="modal-body">
                    添加成功！
               </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
               </div> 
          `)
          $('#myModal').modal('show')
     }
     else {
          //提示输入错误
          if (getPassword == '') {
               $('#getPassword').siblings().show()
          }
          if (getName == '') {
               $('#getName').siblings().show()
          }
          if (getBirthdate == '') {
               $('#getBirthdate').siblings().show()
          }
          if (getTel == '') {
               $('#getTel').siblings().show()
          }
          if(AccessLevel==''){
               $('#getAccessLevel').siblings().show()
          }
     }
})

//查询员工信息
//1.获取搜索框里面的值
//2.根据搜索框里面的值与数据库进行比较
//3.把符合的值显示在表格里
let searchType = 'option1'
let searchArr= []
let searchNowPage
let searchMaxPage
//根据不同选项类型，显示不同提示词
$('#typeOption').click(function (){
     searchType = $(this).val()
     if($(this).val() =='option1'){
          $('#OptionType').attr('placeholder','请输入工号')
     }
     else if($(this).val() =='option2'){
          $('#OptionType').attr('placeholder','请输入姓名')
     }
     else{
          $('#OptionType').attr('placeholder','请输入职位')
     }
})
// 根据内容分页
 function searchShowPage(){
     let pageLen = searchArr.length
     let countPage = Math.ceil(pageLen / 10)
     searchMaxPage = countPage
     $('#page').html(`
     <li class="pageUp"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
               
     <li  id="lastLi" class="pageDown"><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
     `)
     for (let i = 1; i <= countPage; i++){
          $('#lastLi').before(`
          <li class="everyPage1"><a href="#">${i} <span class="sr-only">(current)</span></a></li>
          `)
     }
}
// 点击每个按钮
$('.pagination').on('click', '.everyPage1', function () {
     searchEveryPage($(this).text())
})
// 页面应该渲染多少条数据
function searchEveryPage(clickNum) {
     searchNowPage = parseInt(clickNum)
     let start = (searchNowPage - 1) * 10
     let end = start + 9
     if (searchNowPage == searchMaxPage) {
          end = searchArr.length - 1
     }
     searchPageData(start, end)
     changeLi1(searchNowPage - 1)
}

// 按钮变色
function changeLi1(a) {
     for (let i = 0; i < $('.everyPage1').length; i++) {
          $('.everyPage1').eq(i).removeClass('active')
     }
     $('.everyPage1').eq(a).addClass('active')
}
// 渲染每页数据
function searchPageData(start, end) {
     $('#tbodyContent').html('')
     for (let i = start; i <= end; i++) {
          let everyLiDate = `
               <tr class="headPic">
                    <td><img src="${searchArr[i].headPortrait}"></td>
                    <td>${searchArr[i].jobNumber}</td>
                    <td>${searchArr[i].password}</td>
                    <td>${searchArr[i].userName}</td>
                    <td>${searchArr[i].sex}</td>
                    <td>${searchArr[i].Birthdate}</td>
                    <td>${searchArr[i].tel}</td>
                    <td>${searchArr[i].jobTitle}</td>
                    <td>${searchArr[i].AccessLevel}</td>
                    <td>
                         <button class = "update" title="修改"><span class ="iconfont icon-xiugai"></span></button>
                         <button class = "del" title="删除"><span class ="iconfont icon-ziyuanxhdpi "></span></button>
                    </td>
               </tr>
          `
          $('#tbodyContent').append(everyLiDate)
     }
}
$('#search').click(function (){
     //获取输入框的值
     let inputVal = $('#OptionType').val()
     // 判断多选框的值
     if(searchType =='option1'){ 
          let state = false
          searchArr = []
          for(let i=0;i<useData.length;i++){
               if(useData[i].jobNumber == inputVal){
                    state = true
                    searchArr.push(useData[i])
               }
          }
          searchShowPage()
          if(searchArr.length >= 1){
               let start = 0
               let end = start + 9
               if (1 == searchMaxPage) {
                    end = searchArr.length - 1
               }
               searchPageData(0, end)
          }
          if(state === false ){
               $('.modal-content').html(`
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">搜索提示</h4>
               </div>
               <div class="modal-body">
                    没有该工号，请重新输入！
               </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
               </div> 
               `)
          $('#myModal').modal('show')
          }
     }
     else if(searchType =='option2'){
          let state1 = false
          searchArr = []
          // 把符合条件的数据装进数组
          for(let i=0;i<useData.length;i++){
               if(useData[i].userName == inputVal){
                    state1 = true
                    searchArr.push(useData[i])   
               }
          }   
          searchShowPage()
          if(searchArr.length >= 1){
               let start = 0
               let end = start + 9
               if (1 == searchMaxPage) {
                    end = searchArr.length - 1
               }
               searchPageData(0, end)
          }
          if(state1 === false ){
               $('.modal-content').html(`
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">搜索提示</h4>
               </div>
               <div class="modal-body">
                    没有该姓名，请重新输入！
               </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
               </div> 
               `)
          $('#myModal').modal('show')
          }
     }
     else{
          let state2 = false 
          searchArr = []
          // 把符合条件的数据装进数组
          for(let i=0;i<useData.length;i++){
               if(useData[i].jobTitle == inputVal){
                    state2 = true
                    //渲染符合条件的数据
                    searchArr.push(useData[i])   
               }
          }
          searchShowPage()
          if(searchArr.length >= 1){
               let start = 0
               let end = start + 9
               if (1 == searchMaxPage) {
                    end = searchArr.length - 1
               }
               searchPageData(0, end)
          }
          if(state2 === false ){
               $('.modal-content').html(`
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">搜索提示</h4>
               </div>
               <div class="modal-body">
                    没有该职位，请重新输入！
               </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
               </div> 
               `)
          $('#myModal').modal('show')
          }
     }
     changeLi1(0)
})
//查看全部员工信息
$('.allStaff').click(function(){
     showPage()
     pageData(0, 9)
     $('.pagination').on('click', '.everyPage', function () {
          everyPage($(this).text())
     })
     changeLi(1)
})